<template>
  <div class="chooseSubject">
    <div class="subject-content">
      <div class="title-box">
        选择文理科
      </div>
      <div class="choose-content">
        <div>
          <el-radio v-model="subjectType" label="2">文科</el-radio>
          <el-radio v-model="subjectType" label="1">理科</el-radio>
        </div>
        <div class="tip">{{tipMsg}}</div>
        <div class="m-t-20 choose-btn">
          <el-button type="primary" :disabled="!subjectType" @click="chooseSubject">确 定</el-button>
        </div>
      </div>
      <div class="bg-left">
        <img src="@assets/images/bg_subject_left.png" alt="bg_left">
      </div>
      <div class="bg-right">
        <img src="@assets/images/bg_subject_right.png" alt="bg_right">
      </div>
    </div>
  </div>
</template>

<script>
  import API from '@assets/js/api.js'
  export default {
    name: "chooseSubject",
    data() {
      return {
        subjectType: "",
        tipMsg: '注意:报考类别选定后将不可更改，您只能查询选定类别 的数据信息!'
      }
    },
    methods: {
      chooseSubject() {
        let userInfo = {};
        if(sessionStorage.getItem("userInfo")) {
          userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
        }
        if(!this.subjectType) {
          this.$message.error("请先选择文理科");
          return false
        }
        let params = {
          type: this.subjectType,
          userId: userInfo.id
        };
        this.axios.post(API.selectSubject, params).then(res => {
          if (res.data.code === 1) {
            userInfo.type = this.subjectType;
            sessionStorage.setItem("userInfo", JSON.stringify(userInfo));
            this.$router.push({
              path: '/schoolInfo',
            });
          } else {
            this.$message.error(msg);
          }
        }).catch(err => {
          this.$message.error(err);
        })
      },
    }
  }
</script>

<style lang="stylus">
  .chooseSubject
    .choose-btn
      .el-button
        width 108px
</style>
<style scoped lang="stylus">
  $theme-color = #E65A1E

  .chooseSubject
    position relative
    width 100%
    height 100vh
    background #EFF2F8

    .subject-content
      position relative
      width 70%
      height 60%
      top 50%
      left 50%
      transform translate(-50%, -50%)
      background #fff
      border-radius 10px
      overflow hidden

      .title-box
        height 60px
        line-height 60px
        fong-size 18px
        color #fff
        text-align center
        background $theme-color

      .choose-content
        position relative
        box-sizing border-box
        width 100%
        height 100%
        margin 0 auto
        padding-top 10%
        padding-bottom 30px
        text-align center

      .tip
        padding 20px 0
        fong-size: 12px
        color #f00

      .choose-btn
        position absolute
        width: 100%;
        left 50%
        bottom: 20%;
        transform translateX(-50%)
        text-align: center;

      .bg-left
        position absolute
        height 30%
        left: 0;
        bottom 0

        img
          height 100%

      .bg-right
        position absolute
        height 40%
        right: 0;
        top 120px

        img
          height 100%

</style>